<template>
  <div class="content">
    <el-card shadow="never">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>

    <el-row>
      <!-- 左侧图片 -->
      <el-col :span="6">
        <!-- <img :src="dataList[Index]" alt="" /> -->
        <img :src="product.attributeValue0" alt="" />
        <div class="page">
          <ul>
            <li
              @click="gotoPage(prevIndex())"
              class="el-icon-arrow-left"
              style="background-color: #f4f4f4; float: left"
            ></li>
            <li
              v-for="(item, index) in dataList"
              @click="gotoPage(index)"
              :class="{ current: Index == index }"
              :key="index"
            >
              <img :src="dataList[Index]" alt="" />
            </li>
            <li
              @click="gotoPage(nextIndex())"
              class="el-icon-arrow-right"
              style="background-color: #f4f4f4; float: right"
            ></li>
          </ul>
        </div>
      </el-col>
      <!-- 中间商品信息 -->
      <el-col :span="14">
        <div class="name">
          <span>{{ product.name }}</span>
        </div>
        <div class="summary">
          <dl>
            <dt>编号:</dt>
            <dd>{{ product.sn }}</dd>
            <dt>销售价:</dt>
            <dd>
              <strong id="price" style="font-size: 15px"
                >￥{{ product.price }}</strong
              >
            </dd>
            <dt>市场价:</dt>
            <dd>
              <del id="marketPrice" style="font-size: 15px"
                >￥{{ product.marketPrice }}</del
              >
            </dd>
            <div class="cuxiaoMember" style="display: inline">
              促销普通会员价:
              <strong style="font-size: 15px"
                >￥{{ Math.floor(product.price * 0.95) }}</strong
              >
              促销VIP卡价:
              <strong style="font-size: 15px"
                >￥{{ Math.floor(product.price * 0.92) }}</strong
              >
              促销VIP金卡价:
              <strong style="font-size: 15px"
                >￥{{ Math.floor(product.price * 0.9) }}</strong
              >
              促销VIP钻石卡价:
              <strong style="font-size: 15px"
                >￥{{ Math.floor(product.price * 0.87) }}</strong
              >
            </div>
          </dl>

          <ul class="clearfix">
            <li>
              库存:
              <strong>1000</strong>
            </li>
            <li>
              月销量:
              <strong>{{ product.monthSales }}</strong>
            </li>
            <li>
              评分数:
              <strong>{{ product.scoreCount }}</strong>
            </li>
            <li>
              评分:
              <strong>{{ product.totalScore }}</strong>
            </li>
          </ul>
        </div>
        <!-- 商品数量 -->
        <div class="quantity">
          数量
          <el-input-number
            v-model="num"
            controls-position="right"
            :min="1"
            :max="10"
            size="mini"
          ></el-input-number>
          {{ product.unit }}
        </div>
        <!-- 购物按钮 -->
        <div class="action">
          <el-button class="buy" @click="goorder()">立即购买</el-button>
          <el-button class="addcart" @click="addcart()">加入购物车</el-button>
        </div>
      </el-col>
      <!-- 右侧店铺 -->
      <el-col :span="4">
        <el-card shadow="never">
          <img src="@/assets/image/电商商标.jpg" alt="">
          <div class="store">
            <div class="store-heading">
              <h5>熊猫商店<span>自营</span></h5>
            </div>
          </div>
          <el-divider></el-divider>
          <div class="store-body">
            <dl>
              <dt>地址：</dt>
              <dd>中国深圳环市东</dd>
            </dl>
            <img src="../../assets/image/qq.png" style="width: 20%" alt="" />
          </div>
          <el-divider></el-divider>
          <div class="store-footer">
            <router-link to="/store">进店逛逛</router-link>
            <a>收藏店铺</a>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="5">
        <RankingList ></RankingList>
      </el-col>
      <el-col :span="19" class="introduction">
        <div class="topbar-wrapper y-clearfix">
          <ul class="nav">
            <li><a>商品介绍</a></li>
            <li><a>商品评论</a></li>
            <li><a>商品咨询</a></li>
          </ul>
        </div>
        <img :src="product.attributeValue0" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getproductInfo,cartadd } from "@/api/shop";
import { reactive, toRefs } from "@vue/reactivity";
import router from '@/router'
import RankingList from "@/components/RankingList.vue";
import { ElMessage } from 'element-plus'
export default {
  name: "product",
  setup() {
    function addcart() {
      let idd = sessionStorage.getItem("id");
      console.log(idd);
      cartadd(idd).then(() => {
        ElMessage.success("添加购物车成功");
      });
    }
    function goorder(){
      router.push('/createorder')
    }
    return{
      addcart,
      goorder
    }
  },
  data() {
    let id = sessionStorage.getItem("id");
    // console.log(id);
    let data = reactive({
      product: {},
    });
    let dataList = [];
    getproductInfo(id).then((res) => {
      console.log('--------------',res);
      data.product = res.data.data;
      dataList.push(data.product.attributeValue0);
      this.$emit("getstore", data.product.storeId);
    });
    console.log(dataList);
    return {
      dataList,
      Index: 0,
      num: 0,
      ...toRefs(data),
    };
  },
  components: { RankingList },
  methods: {
    gotoPage(index) {
      this.Index = index;
    },
    prevIndex() {
      if (this.Index == 0) {
        return this.dataList.length - 1;
      } else {
        return this.Index - 1;
      }
    },
    nextIndex() {
      if (this.Index == this.dataList.length - 1) {
        return 0;
      } else {
        return this.Index + 1;
      }
    },
  },
};
</script>
<style scoped>
.content {
  width: 1350px;
  margin: 10px auto;
}
.el-card {
  margin-bottom: 20px;
}
.el-row {
  margin: 10px 0;
}
.el-col {
  padding: 0 10px;
}
/* 图片轮播 */
.el-col img {
  width: 100%;
}
.page ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.page ul li {
  height: 50px;
  margin: 0 3px;
  float: left;
  line-height: 50px;
  text-shadow: none;
  transition: opacity 0.3s;
  cursor: pointer;
}
.page ul li img {
  width: 50px;
  height: 50px;
}
.current {
  border: 1px solid red;
}
/* 内容中心 */
.summary dl {
  padding: 10px 15px;
  margin-bottom: 15px;
  background: url("../../assets/image/productbg.png") no-repeat;
}
.summary dl dt {
  width: 80px;
  line-height: 25px;
  color: #999999;
  font-weight: normal;
  text-align: left;
  float: left;
}
.summary dl dd {
  line-height: 25px;
  margin-left: 90px;
}
.cuxiaoMember strong {
  color: red;
}
.summary ul {
  height: 20px;
  list-style: none;
  padding: 5px 0px;
  border-top: 1px dotted #cccccc;
  border-bottom: 1px dotted #cccccc;
}
.summary ul li {
  border-right: 1px solid #eeeeee;
  float: left;
  padding: 0px 30px;
  color: #999999;
}
/* 数量按钮 */
.quantity {
  margin-bottom: 20px;
}
.quantity .el-input-number {
  width: 100px;
  margin-left: 50px;
}
/* 购物按钮 */
.action {
  padding: 0px 15px 0px 105px;
  margin-bottom: 15px;
}
.action .buy {
  margin-right: 10px;
  color: #f02c6c;
  border-radius: 0px;
  border-color: #f02c6c;
}
.action .addcart {
  color: #fff;
  transition: opacity 0.3s, background-color 0.3s;
  border-color: #f02c6c;
  background-color: #f02c6c;
  background: -webkit-linear-gradient(left, #f02c6c, #ff6600);
  margin-right: 10px;
  border-radius: 0px;
}
/* 店铺 */
.store {
  padding: 0px 10px;
  margin-bottom: 15px;
  transition: box-shadow 0.3s;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.store-heading h5 {
  padding: 0;
  margin: 0;
  line-height: 30px;
  text-align: center;
  font-size: 12px;
}
.store-heading span {
  background-color: #f02c6c;
  display: inline;
  padding: 0.2em 0.6em 0.3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  border-radius: 0.25em;
}
.store-body dl {
  font-size: 12px;
}
.store-body dt {
  line-height: 10px;
  color: #999999;
  font-weight: normal;
  text-align: left;
  float: left;
}
.store-body dd {
  line-height: 10px;
  margin-left: 50px;
  color: #888888;
}
.store-footer {
  display: flex;
  justify-content: space-between;
}
.store-footer a {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #d8d8d8;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.42857143;
  border-radius: 4px;
  color: black;
  text-decoration: none;
}
.store-footer a:hover {
  color: #f02c6c;
  box-shadow: none;
  border-color: #f02c6c;
}
/* 底部介绍推荐 */
.introduction {
  padding: 0, 10px;
}
.introduction .topbar-wrapper {
  z-index: 300;
  border: 1px solid #eeeeee;
  background-color: #ffffff;
}
.introduction .nav {
  margin: 0;
  padding: 0;
  list-style: none;
}
.introduction .nav li {
  float: left;
  position: relative;
  display: block;
}
.introduction .nav li a {
  padding: 5px 20px;
  margin: 10px 0px;
  border-right: 1px solid #eeeeee;
  position: relative;
  display: block;
}
.y-clearfix:before,
.y-clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}
</style>